<!--
事件修饰符
1. 用 .stop 可以阻断冒泡
2. 用 .prevent 阻止默认行为,比如跳转行为
3. 用 .capture 开启捕获机制,在外层开启
4. 用 .self 可以只响应当前事件,不响应冒泡事件
5. 用 .once 只让事件执行一次
6.

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        .inner{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="inner" @click.self="fun_div">
            <button @click.stop="fun_btn">看我</button>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data:{

            },
            methods:{
                fun_btn(){
                    alert("button");
                },
                fun_div(){
                    alert("div");
                }
            }
        })
    </script>
</body>
</html>